<!--
 * @Author: your name
 * @Date: 2021-08-12 20:37:47
 * @LastEditTime: 2021-11-09 16:28:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \workspace\hjimi2\facecloudwebsite\src\views\face-recognition\resource-manage\resource-pay\components\payInfo.vue
-->
<template>
  <div>
    <div class="table_tit_txt">订单信息</div>
    <div class="pay_info_box">
      <div class="item">
        <span>订单号：</span>
        <span class="item_content">{{ orderNumber }}</span>
      </div>
      <div class="item">
        <span>产品名称：</span>
        <span class="item_content">{{ orderTitle }}</span>
      </div>
      <div class="item">
        <span>订单状态：</span>
        <span class="item_content">{{ orderStatus }}</span>
      </div>
      <div class="item">
        <span>创建时间：</span>
        <span class="item_content">{{ createTime }}</span>
      </div>
      <div class="item">
        <span>支付时间：</span>
        <span class="item_content">{{ orderTime }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PayInfo',
  props: {
    orderNumber: {
      require: true,
      type: String,
    },
    orderTitle: {
      require: false,
      default: '人脸检测与质量评估'
    },
    orderStatus: {
      require: true,
      type: String,
    },
    createTime: {
      require: true,
      type: String,
    },
    orderTime: {
      require: true,
      type: String,
    }
  }
}
</script>

<style lang="scss" scoped>
.pay_info_box {
  margin-top: 29px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .item {
    width: 380px;
    margin-right: 90px;
    font-size: 15px;
    height: 22px;
    line-height: 22px;
    margin-bottom: 15px;
    .item_content {
      margin-left: 36px;
      color: #000;
    }
  }
}
</style>
